<template>
  <div>
    <h3>渠道数据汇总:</h3>
    <van-pull-refresh
      v-model="isLoading"
      :head-height="88"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <ul class="list_box">
          <li class="list_item" v-for="(item, index) in list" :key="index">
            <p style="color: #344ede">渠道ID：{{ item.tgid }}</p>
            <div class="list_data">
              <div class="list_data_item">
                <span>注册数量:</span>
                <span>{{ item.reg_count }}</span>
              </div>
              <div class="list_data_item">
                <span>付费用户:</span>
                <span>{{ item.pay_user_count }}</span>
              </div>
              <div class="list_data_item">
                <span>实付金额:</span>
                <span>{{ item.rmb_total }}</span>
              </div>
              <div class="list_data_item">
                <span>已获提成:</span>
                <span>{{ item.cps_fee }}</span>
              </div>
            </div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      isLoading: false,
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.isLoading) {
          this.isLoading = false;
        }
        this.loading = false;

        this.finished = true;
      }, 500);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>

<style scoped>
h3 {
  padding: 40px 0 60px 30px;
  font-size: 24px;
}

.list_box {
  width: 710px;
  padding: 0 20px;
}

.list_item {
  box-sizing: border-box;
  padding: 24px 20px;
  width: 710;
  height: 350px;
  margin-bottom: 50px;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  font-size: 24px;
}

.list_data {
  width: 670px;
  display: flex;
  flex-wrap: wrap;
}

.list_data_item {
  margin-top: 35px;
  width: 335px;
  height: 60px;
}

.list_data_item span {
  display: block;
}

.list_data_item span:first-child {
  color: #999999;
}

.list_data_item span:last-child {
  margin-top: 20px;
}
</style>